<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 弹窗 -->
      <windowDepts
        :id="id"
        ref="wdepts"
        :dialog-visible="dialogVisible"
        @render="render"
        @handleClose="handleClose"
      />
      <el-card class="tree-card">
        <!-- 用了一个行列布局显示顶部公司 -->
        <tree-tool :tree-data="companyInfo" :is-company="true" @handleOpen="handleOpen" @render="render" />
        <hr>
        <el-tree :data="treeData" default-expand-all>
          <template v-slot="{ data }">
            <tree-tool :tree-data="data" :is-company="false" @render="render" @handleOpen="handleOpen" />
          </template>
        </el-tree>
      </el-card>
    </div>
  </div>
</template>

<script>
import treeTool from '@/views/departments/component/tree-tool.vue'
import windowDepts from '@/views/departments/component/window-depts.vue'
import { getAllDepartrment } from '@/api/departments'
import { listToTree } from '@/utils/index'

export default {
  name: 'Departments',
  components: {
    treeTool,
    windowDepts
  },
  data() {
    return {
      companyInfo: {
        name: '传智播客黑马程序员',
        manager: '负责人'
      },
      treeData: [],
      dialogVisible: false,
      id: ''
    }
  },
  async created() {
    await this.render()
  },
  methods: {
    // 渲染函数
    async render() {
      const { data } = await getAllDepartrment()
      this.treeData = listToTree(data.depts, '')
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    // 打开弹窗
    handleOpen(id, value) {
      this.dialogVisible = true
      this.id = id
      if (value === 'update') {
        this.$refs.wdepts.getdeptDetails(id)
      }
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
